Visual Characteristics of User Interface Elements in a Unified Interest Layer

ABSTRACT

A user-activatable dashboard (also referred to as a unified interest layer) contains any number of user interface elements, referred to herein as “widgets,” for quick access by a user. In response to a command from a user, the dashboard is invoked and the widgets are shown on the screen. The user can activate the dashboard at any time, causing the dashboard to temporarily replace the existing user interface display on the user&#39;s screen. Once the dashboard has been activated, the user can interact with any or all of the widgets, and can configure the dashboard by adding, deleting, moving, or configuring individual widgets as desired. When the user wishes to return to the normal user interface he or she was working with, the user issues a command causing the dashboard to be dismissed. Once the dashboard has been dismissed, the previous user interface state is restored, allowing the user to resume normal interactions with the operating system.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application is a continuation of U.S. patent application Ser. No.15/677,465, filed on Aug. 15, 2017, which is a continuation of U.S.patent application Ser. No. 14/036,807, filed on Sep. 25, 2013, which isa divisional of U.S. patent application Ser. No. 12/495,686, filed Jun.30, 2009, which is a divisional of U.S. patent application Ser. No.11/370,743, filed Mar. 7, 2006, which is a continuation of U.S. patentapplication Ser. No. 10/877,968, filed Jun. 25, 2004, which are herebyincorporated by reference in their entirety.

This application is generally related to the following applications,each incorporated herein by reference in its entirety:

U.S. patent application Ser. No. 11/144,384, for “ProcedurallyExpressing Graphic Objects for Web Pages,” filed Jun. 25, 2004 (P3489);

U.S. patent application Ser. No. 10/874,829, for “User Interface forAssisting in the Installation of an Asset,” filed Jun. 22, 2004(P3453US1);

U.S. patent application Ser. No. 10/877,358, for “Display-Wide VisualEffects for a Windowing System Using a Programmable Graphics ProcessingUnit,” filed Jun. 25, 2004 (P3351US1);

U.S. patent application Ser. No. 10/826,762, for “High-Level ProgramInterface for Graphics Operations,” filed Apr. 16, 2004 (P3352US1);

U.S. patent application Ser. No. 10/866,360, for “System and Method forProcessing Graphics Operations with Graphics Processing Unit,” filedJun. 11, 2004 (P3354USX1);

U.S. patent application Ser. No. 10/826,596, for “Improved GaussianBlur,” filed Apr. 16, 2004 (P3355US1);

U.S. patent application Ser. No. 10/826,744, for “System for EmulatingGraphics Operations,” filed Apr. 16, 2004 (P3356US1);

U.S. patent application Ser. No. 10/876,298, for “User-InterfaceDesign,” filed Jun. 24, 2004 (P3318US1);

U.S. patent application Ser. No. 10/876,039, for “Gaussian BlurApproximation Suitable for GPU,” filed Jun. 24, 2004 (P3362US1);

U.S. patent application Ser. No. 10/825,694, for “System for OptimizingGraphics Operations,” filed Apr. 16, 2004 (P3353US1);

U.S. patent application Ser. No. 10/826,773, for “System for Reducingthe Number of Programs Necessary to Render an Image,” filed Apr. 16,2004 (P3357US1); and

U.S. patent application Ser. No. 10/875,483, for “Fast ApproximationFunctions for Image Processing Filters,” filed Jun. 24, 2004 (P3429US1).

TECHNICAL FIELD

The present invention relates generally to graphical user interfaces,and more particularly to a user-activatable, configurable, unified layercontaining items of interest to a user.

BACKGROUND

A hallmark of modern graphical user interfaces is that they allow alarge number of items to be displayed on a screen at the same time. Theleading personal computer operating systems, such as Apple MacOS X andMicrosoft Windows XP, provide user interfaces in which a number ofwindows can be displayed, overlapped, resized, moved, configured, andreformatted according to the needs of the user. Taskbars, menus, andother UI elements provide mechanisms for accessing and activatingwindows even when they are hidden behind other windows.

Although many users appreciate the ability of such user interfaces topresent such a wealth of information on the screen simultaneously, theresulting “information overload” can be somewhat overwhelming Usersoften find that it is difficult to navigate to a particular UI elementor window, or to even locate a desired element, among a large number ofonscreen elements. The problem is further compounded when userinterfaces allow users to position the onscreen elements in any desiredarrangement, including overlapping, minimizing, maximizing, and thelike. Such flexibility may be useful to some users but may result inchaos for other users. Having too many items on the screensimultaneously leads to information overload, and can act as aninhibiting factor in the effective use of the computer equipment.

Some user interfaces dedicate certain areas of the screen for holdingcertain user interface elements that are commonly used (such as a menubar, or icons that activate commonly-used programs or files). However,such areas are generally limited in size, so as not to occupy too muchvaluable screen real estate that could otherwise be devoted to the mainworkspace area of the display screen. Although small elements, such as adigital clock element or taskbar, may be well suited for display in suchdedicated screen areas, other types of elements cannot be usablypresented in such a small screen area; thus they must be activated, orenlarged, before they can be used or viewed. This causes yet anotherlevel of confusion, since the items need to be activated and dismissed.Furthermore, the items may overlap or otherwise add to the number ofonscreen elements that must be dealt with and organized by the user.

These problems cause many users to fail to use their computers to theirfull potential, and can further result in frustration or confusion,particularly in novice users.

What is needed is a mechanism for providing easy access to commonly useduser interface elements, without introducing additional clutter orconfusion. What is further needed is a mechanism for providing suchaccess in a user-configurable manner that allows the user to activateand dismiss the UI elements at will and with a minimum of confusion.What is further needed is a mechanism that allows users to easilyactivate and dismiss certain user interface elements regardless of thenumber of open windows currently on the user's screen, and withoutrequiring the user to search for particular user interface elementsamong a set of open windows.

What is further needed is a mechanism for addressing the above-statedproblems in a convenient, easy-to-use manner that is likely to bereadily adopted by users, and that fits within the framework of existinggraphical user interfaces.

SUMMARY

According to the techniques of the present invention, a user-activatabledashboard (also referred to as a unified interest layer) is provided.The dashboard can contain any number of user interface elements,referred to herein as “widgets,” for quick access by a user. In responseto a command from a user, the dashboard is invoked and the widgets areshown on the screen. In one aspect of the invention, the user canactivate the dashboard at any time, causing the dashboard to temporarilyreplace or overlay the existing user interface display on the user'sscreen.

Once the dashboard has been activated, the user can interact with any orall of the widgets, and can configure the dashboard by adding, deleting,moving, or configuring individual widgets as desired. When the userwishes to return to the normal user interface, the user issues a commandcausing the dashboard to be dismissed. Once the dashboard has beendismissed, the previous user interface state is restored, allowing theuser to resume normal interactions with the operating system.

In one aspect, the dashboard, when activated, temporarily replaces theexisting user interface display. In another aspect, the dashboardpartially obscures the existing user interface display, but allows somepart of the existing display to be visible so as to remind the user ofits presence. In another aspect, the existing user interface display isfaded, blurred, and/or darkened while the dashboard is active.

In one aspect, a transition effect is displayed during activation and/ordismissal of the dashboard, so as to assist the user in understandingwhat is happening when the dashboard appears and disappears.

In one aspect, the user can select from any number of widgets to beplaced on the dashboard in any desired arrangement. Whenever thedashboard is activated, the widgets appear in the locations where theuser placed them previously.

Widgets can be of any type. They can communicate with a remote server toprovide information to the user (for example, a weather report), or theycan provide commonly needed functionality (for example, a calculator),or they can act as an information repository (for example, a notepad orcalendar). Some widgets can provide a combination of these types offunctions. In one aspect, an application programming interface (API) isprovided so as to allow third-party developers to create and distributeadditional widgets that provide different types of functionality.

BRIEF DESCRIPTION OF THE DRAWINGS

The accompanying drawings illustrate several embodiments of theinvention and, together with the description, serve to explain theprinciples of the invention.

FIG. 1 is a block diagram depicting an overall architecture forimplementing the present invention according to one embodiment.

FIG. 2 is a flowchart depicting a method for activating and using adashboard according to one embodiment of the present invention.

FIG. 3 is a block diagram depicting a software architecture forimplementing the present invention according to one embodiment.

FIG. 4 is a screen shot depicting a desktop user interface prior toactivation of a dashboard.

FIG. 5 is a screen shot depicting an initial state for a dashboard,according to one embodiment.

FIG. 6 is a screen shot depicting a configuration bar for a dashboard,according to one embodiment.

FIG. 7 is a screen shot depicting user selection of a widget from theconfiguration bar, according to one embodiment.

FIG. 8 is a screen shot depicting a dashboard including a calculatorwidget, according to one embodiment.

FIG. 9 is a screen shot depicting a dashboard including a calculatorwidget and a music player widget, according to one embodiment.

FIG. 10 is a screen shot depicting activation of a music playerapplication as invoked by a music player widget, according to oneembodiment.

FIG. 11 is a screen shot depicting a dashboard including a calculatorwidget, a music player widget, and an address book widget, according toone embodiment.

FIG. 12 is a screen shot depicting operation of an address book widget,according to one embodiment.

FIG. 13 is a screen shot depicting a dashboard including a number ofwidgets including a notes widget, according to one embodiment.

FIG. 14 is a screen shot depicting a dashboard where the configurationbar has been closed, according to one embodiment.

FIG. 15 is a screen shot depicting a dashboard wherein widgets have beenmoved to new positions.

FIGS. 16A through 16C are screen shots depicting a transition animationfor dismissing the dashboard, according to one embodiment.

FIGS. 17A through 17D are screen shots depicting a transition animationfor activating the dashboard, according to one embodiment.

FIG. 18 is an example of a calendar widget according to one embodiment.

FIG. 19 is an example of a stock quote widget according to oneembodiment.

FIG. 20 is an example of a weather widget according to one embodiment.

FIG. 21 is an example of a traffic webcam widget according to oneembodiment.

FIG. 22 is an example of a music player widget according to oneembodiment.

FIG. 23 is an example of a package tracking widget according to oneembodiment.

FIG. 24 is an example of an address book widget according to oneembodiment.

FIG. 25 is an example of a clock widget according to one embodiment.

FIG. 26 is a screen shot depicting a dashboard where the configurationbar has been closed, according to one embodiment.

FIG. 27 is a screen shot depicting a dashboard where the configurationbar has been opened to show favorite widgets, according to oneembodiment.

FIG. 28 is a screen shot depicting a dashboard where the configurationbar has been opened to allow access to additional widgets, according toone embodiment.

FIG. 29 is a screen shot depicting a dashboard including rollover iconsfor closing and configuring a widget, according to one embodiment.

FIG. 30 is a screen shot depicting a dashboard wherein some labels inthe configuration bar have changed in appearance, according to oneembodiment.

FIG. 31 is a screen shot depicting a dashboard wherein some labels inthe configuration bar have changed in appearance, and wherein thedashboard includes rollover icons for closing and configuring a widgetaccording to one embodiment.

FIG. 32 is a screen shot depicting a dashboard showing preferencescontrols for two widgets, according to one embodiment.

FIG. 33 is an example of a calculator widget according to oneembodiment.

FIGS. 34A and 34B depict an example of a dictionary/thesaurus widgetaccording to one embodiment.

One skilled in the art will recognize that these Figures are merelyexamples of the operation of the invention according to one embodiment,and that other user interface arrangements and modes of operation can beused without departing from the essential characteristics of theinvention.

DETAILED DESCRIPTION OF EMBODIMENTS

The present invention is now described more fully with reference to theaccompanying Figures, in which several embodiments of the invention areshown. The present invention may be embodied in many different forms andshould not be construed as limited to the embodiments set forth herein.Rather these embodiments are provided so that this disclosure will becomplete and will fully convey the invention to those skilled in theart.

Hardware Architecture

In one embodiment, the present invention is implemented as part of anoperating system for a personal computer. One example of animplementation of the present invention is in a Macintosh personalcomputer running the MacOS X operating system. Referring now to FIG. 1,there is shown an example of an architecture for a system 100 forimplementing the present invention. Personal computer 102 includesprocessor 103, memory 105, input devices 114 such as keyboard and mouse,and output device 115 such as a display screen. A graphics module 113,such as a graphics card, may be provided for generating output foroutput device 115. User 101 interacts with system 100 by providing inputvia device 114 and viewing output via device 115. Computer 102 alsoincludes local storage 106, such as a hard drive, and can also includenetwork connection 108 for accessing remote server 107. These componentsare well-known hardware components commonly used for running softwareapplications. In one embodiment, software embodying the invention isprovided on a computer-readable medium such as local storage 106.

In another embodiment, the present invention is implemented as a plug-inthat can be installed and run on personal computer 102, and thatinteracts with the operating system of personal computer 102 to performthe functions described herein. In yet another embodiment, the presentinvention is implemented as functionality in a software applicationrunning on a personal computer.

For illustrative purposes, in the following description the invention isdescribed as a feature of an operating system; however, one skilled inthe art will recognize that the techniques of the present invention canbe implemented in other contexts as well, including those describedabove.

Method of Operation

Referring now to FIG. 2, there is shown a flowchart depicting a methodfor activating and using a dashboard according to one embodiment of thepresent invention. In one embodiment, the user can activate thefunctionality of the present invention at any time, for example byhitting a designated function key or key combination, or by clicking onan icon, or by selecting a command from an onscreen menu, or by movingan onscreen cursor to a designated corner of the screen. In response tothe user performing such an action 202, the current state of the userinterface is saved 203, the user interface is temporarily inactivated(and/or faded 204), an animation is played 205 to introduce thedashboard, and the dashboard of the present invention is displayed 206.If applicable, a previous state of the dashboard is retrieved, so thatthe dashboard can be displayed in the same configuration as the lasttime the user saw it.

In one embodiment, the dashboard is overlaid on the existing desktopuser interface; the user interface may be darkened, brightened, blurred,distorted, or otherwise altered so as to emphasize that it istemporarily inactivated. The existing desktop may be visible behind thedashboard. In another embodiment, the existing desktop is not visiblewhile the dashboard is active. In another embodiment, the desktop isshrunk to a small portion of the screen while the dashboard is active,and can be reactivated by clicking on it. In another embodiment, thedesktop is shrunk and presented as a widget similar to the widgetsdescribed herein; the desktop can be reactivated by clicking on thewidget.

The dashboard (also referred to herein as a “unified interest layer”)includes a number of elements, referred to herein as “widgets”. Thesewidgets generally include software accessories for performing useful,commonly needed functions. Examples of widgets include, withoutlimitation, a calendar, a calculator, an address book, a packagetracker, a weather module, and the like. In one embodiment, some widgetsmay interact with remote sources of information, such as servers, toprovide information; for example, a weather module may retrieve liveweather data from a remote server. Widgets may be interactive, so that auser performs common input operations (such as clicking a mouse ortyping on a keyboard) to utilize the functionality of a widget.

The user interacts with and/or configures widgets as desired 207. In oneembodiment, the user can move widgets around the screen, and can resizewidgets if applicable. Some widgets may be resizable, and some may be offixed size; the widget author may specify whether a widget can beresized. Some widgets may automatically resize themselves based on theamount or nature of the data being displayed. In one embodiment, widgetsmay overlap one another. In another embodiment, widgets do not overlapone another; if the user attempts to move one widget to the positionoccupied by another widget, one of the widgets may automatically moveout of the way to make room. In one embodiment, the position,configuration, and size of widgets are saved when the dashboard isdismissed, so that the same state can be restored the next time thedashboard is invoked.

When the user wishes to dismiss 208 the dashboard and return to thenormal user interface, he or she does so by invoking a dismissal commandIn various embodiments, the user hits a function key or key combination(which may be the same or different than the key or combination used toactivate the dashboard), or clicks on a close box or other icon, orclicks on negative space within the dashboard (in other words, a spacebetween widgets), or moves an onscreen cursor to a predefined corner ofthe screen. In another embodiment, the dashboard is automaticallydismissed after some predetermined period of time without any useractivity, or upon some other trigger event. An animation may be played209 to provide a transition as the dashboard is dismissed.

In one embodiment, when the dashboard is dismissed, the currentconfiguration of the widgets is stored so that it can be retrieved thenext time the dashboard is activated. In one embodiment, an animation isplayed to dismiss the dashboard and reintroduce the user interface. Theuser interface is restored 210 to its previous state, so that the usercan resume normal interaction with the software applications andoperating system of the computer.

In one embodiment, the dashboard is configurable. The user can selectany number of widgets to be displayed, for example by dragging thewidgets from a configuration bar (or other user interface element) ontoa location on the dashboard. In one embodiment, the configuration barcan include different types of widgets, and can be categorized and/orhierarchically organized. In one embodiment, in response to the userdragging a widget onto the configuration bar, the widget is downloadedfrom a server and installed (if it is not already installed on theuser's machine). In one embodiment, certain widgets may cost money, sothat the user must provide a credit card or some other payment meansbefore the widget is installed on the user's machine. In anotherembodiment, widgets are already installed on the user's machine, but areonly made visible when they have been dragged from the configuration baronto the dashboard. One skilled in the art will recognize that theconfiguration bar is merely an example of one type of user interfaceelement for configuring the dashboard, and that other configurationmechanisms can be used without departing from the essentialcharacteristics of the present invention.

As mentioned above, various types of animations can be used to emphasizeand clarify transitions in connection with the present invention. Forexample, activation of the dashboard can be signaled by a “fly-in”animation, wherein the widgets move from the edge of the screen inwardsto their respective positions in the dashboard. Simultaneously, the userinterface can be darkened, blurred, distorted, or otherwise altered toindicate that it is temporarily inactive. Dismissal of the dashboard canbe signaled by a “fly-out” animation, wherein the widgets move towardsthe edge of the screen and then appear to fly off the screen.Simultaneously, the user interface is restored to its normal state. Inone embodiment, when the user drags a widget from the configuration baronto the desktop, an animation such as a ripple effect can be shown, toemphasize that the widget has been placed onto the desktop in theselected location. The ripple effect distorts the background temporarilyto give the impression that the widget is being placed into water. Inone embodiment, the effect is implemented according to animation anddistortion techniques described in detail in the relatedcross-referenced patent applications. In one embodiment, such animationsare configurable by the user.

In one embodiment, more than one dashboard is available. For example,the user can configure one dashboard to contain widgets related to work,and another for widgets related to personal matters. Different triggerevents (such as different key combinations) can be used for triggeringthe various dashboards; alternatively, the user can select from a pop-upmenu which dashboard he or she wishes to activate. The system of thepresent invention stores state information for each of the dashboards.Different dashboards can contain one or more of the same widgets; stateinformation for a widget can be maintained separately for each dashboardin which the widget appears, or it can be commonly maintained across alldashboards in which the widget appears. In addition, differentdashboards can be available for different users of computer 102, so thateach user can only access the dashboard(s) he or she created. A user canspecify a dashboard as being available to other users, if desired. Auser can also specify, for any or all of the dashboards he or shecreates, whether other users are permitted to make changes to thedashboard(s).

In one embodiment, some or all widgets are associated with related,fully functional applications providing expanded versions of thefunctionality of the corresponding widgets. These widgets include abutton, or icon, or other element, for quickly launching the associatedapplication. When the user clicks on the button, the dashboard isdismissed, the normal desktop user interface is reactivated, and theassociated application is automatically launched. For example, as willbe described in more detail below, a music player widget can include abutton for launching a fully functional music player applicationcontaining additional features beyond what is available in the widget.

In one embodiment, a button can be provided for accessing a website, webpage, or web-based application having functionality or informationrelated to a widget. When the user clicks on the button, the dashboardis dismissed, the normal desktop user interface is reactivated, a webbrowser is launched, and the web page (or the like) associated with thewidget is automatically launched. For example, a stock quote widget mayinclude a button for accessing a website that includes more detailedinformation on a portfolio or on a particular stock. In anotherembodiment, related fully functional applications, websites, web pages,or web-based applications can be accessed by other means than a buttonwithin the widget. For example, such functionality can be launched viaan on-screen icon or menu, or via a keystroke or key combination.

In one embodiment, the fully functional application or related websiteprovides context for a launched widget. For example, if the user hashighlighted a word in a document before activating a dictionary widget,the dictionary widget's text field is automatically populated with thehighlighted word. In one embodiment, a word search is automaticallyactivated, and the results automatically displayed, so that activatingthe dictionary widget causes a definition to be displayed without anyfurther user interaction. Similarly, if an email message is open on theuser's screen when an address book widget is launched, the address bookis automatically opened to a page corresponding to the contactinformation for the sender of the email message. In one embodiment, suchprepopulation or automatic opening is not performed under certainsituations, such as for example if the widget is already open to anotherpage or entry. In one embodiment, the user can configure the operationof the widget, including whether or not such prepopulation or automaticopening occurs and under what circumstances it should occur. One skilledin the art will recognize that there are many other situations where awidget can use context information from a currently-running applicationor website.

In one embodiment, some or all widgets have rollover elements; these areuser interface elements that appear when the onscreen cursor is movedover the widget. The rollover elements disappear when the onscreencursor is moved so that it is no longer over the widget. In oneembodiment, rollover elements only appear if the cursor is held over thewidget for at least a predetermined period of time, such as half asecond. An example of a rollover element is a volume ring (not shown)for music player application.

FIGS. 4 through 17D and 26 through 32 depict examples of dashboardoperations in response to various user commands; these Figuresillustrate various techniques and capabilities of the present invention.

FIG. 4 depicts a desktop user interface 400 prior to activation of thedashboard. Desktop user interface 400 (referred to herein as “desktop”)is a conventional user interface as may be provided by an operatingsystem such as MacOS X. Desktop 400 has a background image, menu bar401, and other standard features. As is known in the art, desktop 400may also include windows, icons, and other elements (not shown).

The user activates the dashboard by selecting an item from a menu, or byclicking on an icon, or by pressing a function key or key combination,or by some other means for invoking a command FIG. 5 depicts an initialstate for a dashboard, according to one embodiment. In the example ofFIG. 5, a configuration icon 501 is initially displayed. Alternatively,upon activation, the dashboard can include one or more default widgets.Alternatively, if the dashboard has previously been activated andconfigured, the widgets are displayed as previously configured. As shownin FIG. 5, the dashboard itself is not necessarily visible as a distinctlayer; rather its various components (such as widgets, icon 501, andother features) are visible. In one embodiment, these components aredisplayed in a transparent layer that allows desktop 400 to be seenthrough it. In one embodiment desktop 400 and its components aredarkened (or blurred, or otherwise visually modified) while thedashboard is active, so as to emphasize that desktop 400 is temporarilyinactive. The user can easily reactivate desktop 400 and dismiss thedashboard by simply clicking on an area of the screen where no dashboardelement is being displayed; in one embodiment, clicking on this“negative space” causes the dashboard to be dismissed according totechniques described in more detail below. In another embodiment, othercommands, key combinations, icons, or other user input is used to causethe dashboard to be dismissed. In another embodiment, desktop 400 is notvisible while the dashboard is active.

In one embodiment, the user can move icon 501 to any location on thescreen by dragging it, and the position of icon 501 is persistent fromone invocation of the dashboard to the next.

The user clicks on icon 501 to activate configuration bar 601, as shownin FIG. 6. Configuration bar 601 provides access to various widgets thatcan be placed on the dashboard. In one embodiment, a text label is shownfor each available widget. In another embodiment, an icon is shown foreach available widget. If many widgets are available, they may bearranged hierarchically by type, or alphabetically, or by any othercategorization methodology. For example, a number of categories may bedisplayed; clicking on one of the categories causes a pull-down menu tobe displayed, listing a number of widgets in that category. In oneembodiment, a buy command 602 is also available, allowing the user toselect widgets from an online store or website. One skilled in the artwill recognize that the particular configuration and appearance ofconfiguration bar 601 in FIG. 6 is merely exemplary, and that many otherarrangements are possible. The user can dismiss configuration bar 601 byclicking on dismissal icon 603. Referring now briefly to FIG. 31, a Donebutton 3101 can also be provided for dismissing configuration bar 601.

In one embodiment, the user can move configuration bar 601 to anylocation on the screen by dragging it, and the position of configurationbar 601 is persistent from one invocation of the dashboard to the next.Also, in one embodiment the state of configuration bar 601 (open orclosed) is persistent from one invocation of the dashboard to the next.

The user can drag widgets from configuration bar 601 onto the surface ofthe dashboard (in other words, anywhere on the screen), using standarddrag-and-drop functionality for moving objects on a screen. FIG. 7depicts user selection of a calculator widget from the configurationbar, according to one embodiment. Calculator label 701 is highlighted,to indicate that it has been selected by the user. FIG. 8 depicts thedashboard after the calculator widget 801 has been placed on the screen.In one embodiment, an animation, such as a ripple animation, is shownwhen the user “drops” widget 801 by releasing a mouse button (orequivalent input device) to place widget 801 at the desired location.The user can move widget 801 after it has been placed, to any otherdesired location, or can remove widget 801 from the screen, for exampleby dragging it off the screen, or dragging it back onto configurationbar 601, or by invoking a remove command. The position, state, andconfiguration of widget 801 are preserved when the dashboard isdismissed, so that these characteristics are restored the next time thedashboard is activated.

In one embodiment, multiple instances of some widgets can be activated,by dragging the widget from configuration bar 601 onto the dashboardsurface two or more times. In another embodiment, only one instance ofeach widget can be activated. In another embodiment, some widgets canhave multiple instances and others cannot.

Once calculator widget 801 has been placed on the dashboard, the usercan interact with it by entering numbers via a mouse or other pointingdevice, or via a keyboard. Conventional operations for calculatorapplications are available.

FIG. 9 depicts the screen after the user has dragged both a calculatorwidget 801 and a music player widget 901 onto the dashboard, accordingto one embodiment. Music player widget 901 is placed by clicking anddragging from “iTunes” label 903 in configuration bar 601. Music playerwidget 901, in this embodiment, provides a subset of the functionalityassociated with a fully functional music player application. In oneembodiment, music player widget 901 includes button 902 for activating afully functional music player application. Thus, the user can easilylaunch an application that provides enhanced functionality with respectto a widget.

In one embodiment, in response to the user clicking button 902 toactivate the full music player application, the dashboard is dismissed,the normal desktop 400 is restored, and the full music playerapplication is launched. All of these steps take place automatically,without requiring additional user intervention. FIG. 10 depicts thescreen after the user has activated the full music player application1001 by clicking on button 902 in music player widget 901, according toone embodiment. The dashboard has been dismissed, and the variouselements of desktop 400, including menu bar 401, are once again active.

In FIG. 11, the user has reactivated the dashboard (thus restoringwidgets 801 and 901 in their previous states and locations), and hasplaced an address book widget 1101 by dragging it from label 1102.Again, in one embodiment, a ripple animation is displayed when widget1101 is dropped onto its location on the dashboard.

The user can interact with address book widget 1101 as he or she wouldnormally interact with an address book application. For example, asshown in FIG. 12, the user can type in the first few letters of aperson's name in field 1201; once sufficient information has beenentered to identify an individual, that individual's address card isdisplayed.

FIG. 13 depicts the dashboard after a number of widgets have beenplaced, including notes widget 1301, calculator widget 801, music playerwidget 901, and address book widget 1101. In one embodiment,double-clicking in notes widget 1301 causes it to enter an edit modewherein text can be entered or edited. When not in edit mode, widget1301 can be moved around the dashboard. In other embodiments, othertypes of user actions (for example pressing modifier keys) can be usedto distinguish between text editing operations and widget-draggingoperations.

The user can dismiss configuration bar 601 by clicking on dismissal icon603. FIG. 14 depicts a dashboard after configuration bar 601 has beenclosed, according to one embodiment. Configuration icon 501 isdisplayed, which allows the user to reactivate configuration bar 601 asdesired.

The user can move widgets around the screen as desired. Widget locationsare preserved when the dashboard is dismissed, so that the widgetsreappear at the same location where they were left, when the dashboardis activated. FIG. 15 depicts the dashboard after widgets 801, 901,1101, 1301 have been moved to new positions.

As discussed above, in one embodiment a transition animation is playedwhen the dashboard is dismissed. FIGS. 16A through 16C are screen shotsdepicting a “fly-out” transition animation, wherein widgets 801, 901,1101, 1301 appear to fly off the edges of the screen when the dashboardis dismissed. While they are flying off the edges of the screen, widgets801, 901, 1101, 1301 grow in size and fade, so as to reinforce theappearance of movement and transition. At the same time, desktop 400 andits features (such as menu bar 401) are restored to their normal,non-faded appearance.

As discussed above, in one embodiment a transition animation is playedwhen the dashboard is activated. FIGS. 17A through 17D are screen shotsdepicting a “fly-in” transition animation, wherein widgets 801, 901,1101, 1301 appear to fly in from the edges of the screen when thedashboard is activated. Widgets 801, 901, 1101, 1301 are faded andenlarged when they first appear at the screen edges; they reduce in sizeand become more solid in appearance while they are flying in, so as toreinforce the appearance of movement and transition. At the same time,desktop 400 and its features (such as menu bar 401) gradually fade intothe background.

In one embodiment, the system of the present invention includes thecapability to alert the user when a widget needs attention or has newinformation to display to the user, even if the dashboard is notcurrently active. For example, an icon on a “Dock”, or taskbar, or otheruser interface element commonly associated with a desktop userinterface, can blink or bounce or otherwise indicate an alert condition.A distinctive sound can also be played. Alternatively, a dialog box canbe presented, or a text alert can be displayed. Whatever form it maytake, the alert can be of a generalized type or it may indicate thespecific widget that issued the alert, and may even have additionalinformation specifying the nature of the alert. The user can thenactivate the dashboard (either by a dashboard activation command asdescribed above, or by clicking on an icon or button associated with thealert) to see the widget that issued the alert. Alternatively, thedashboard can automatically be activated in such a situation, or adialog box can be presented to allow the user to indicate whether or notthe dashboard should be activated.

For example, a package tracking widget may issue an alert when a packagehas been delivered. The alert may be generalized, or it may indicatethat the package tracking widget is the source of the alert, or it mayeven provide the delivery information. The user can dismiss the alert,or activate the dashboard to see the widget and interact with it toobtain more information. As another example, a traffic webcam widget canissue an alert when an accident has occurred on the route covered by thewebcam.

In one embodiment, configuration bar 601 has several possible states.Referring now to FIG. 26, there is shown an example of the dashboardwhere the configuration bar is closed, so that configuration icon 501 isdisplayed. Two stickies widgets 1301 are currently being displayed,along with two clock widgets 2500A, 2500B.

Clicking on configuration icon 501 causes configuration bar 601 to bedisplayed in a first state, as shown in FIG. 27. The first stateincludes labels 2701 for various widgets that are designated as“favorites”; in one embodiment, these are a subset of all of the widgetscurrently installed on the user's machine. Thus, in this state, the useris presented with only those widgets that are commonly needed. As willbe seen, the user is able to configure this view so that it includes anydesired subset of installed widgets. In one embodiment, configurationbar 601 in this state includes a “More” label or icon. The user clickson this label or icon to cause configuration bar 601 to expand to itssecond state, as shown in FIG. 28. Dismissal icon 603 causesconfiguration bar 601 to be dismissed, reverting to configuration icon501 as shown in FIG. 26. In one embodiment, the on-screen position oficon 603 matches that of icon 501, so that the user can easily open andclose configuration bar 601 without moving the cursor around.

The user can drag labels 2701 onto the dashboard surface to placewidgets onto the dashboard. As described above, in one embodiment adistinctive animation, such as a ripple effect, is shown to reinforcethe notion that the widget is being placed at the specified location.

Referring now to FIG. 28, there is shown an example of configuration bar601 in its second, expanded state, providing access to additionalwidgets as well as the favorite widgets that were presented in the firststate. In this state, configuration bar 601 has two sections 2802, 2803.Section 2802 includes labels 2701 for favorite widgets; this includesthe same subset of widgets that is included in the first state ofconfiguration bar 601, as shown in FIG. 27. Section 2803 includes labels2701 for other widgets that are not included in the set of favoritewidgets. Dragging a label 2701 from section 2802 to 2803 causes thecorresponding widget to be removed from the favorites subset. Dragging alabel 2701 from section 2803 to 2802 causes the corresponding widget tobe added to the favorites subset. Dragging a label 2701 from eithersection 2802 or 2803 onto the dashboard surface causes the correspondingwidget to be placed at the specified location. Dragging a label 2701from either section 2802 or 2803 onto trash icon 2801 causes the label2701 to be removed from configuration bar 601; in one embodiment, thisalso causes the corresponding widget to be removed from the dashboard(if it is currently open). In one embodiment, dragging a label 2701 ontotrash icon 2801 also causes the corresponding widget to be deleted fromthe user's machine, or made unavailable. In one embodiment, the user ispresented with a dialog box to confirm that he or she wishes to deletethe widget. In one embodiment, the user can also drag widgets onto trashicon 2801 to cause the widgets to be closed, dismissed, and/oruninstalled. More gadgets label 2602 provides access to a website,online store, or other resource for obtaining and installing additionalwidgets; in one embodiment it offers functionality that is similar tobuy command 602 as described above in connection with FIG. 6.

In one embodiment the state of configuration bar 601 is persistent fromone invocation of the dashboard to the next.

Referring now to FIG. 30, there is shown an example of a dashboardwherein some labels 2701A in configuration bar 601 have changed inappearance, while other labels 2701B, 2701C are unchanged, according toone embodiment. In one embodiment, when a widget is open, itscorresponding label 2701 on configuration bar 601 changes in appearance;for example, it is grayed out or displayed in some other color. Inanother embodiment, label 2701 is grayed out (or otherwise changed) onlyif the widget is a single-instance widget (as described above); formultiple-instance widgets, label 2701 remains unchanged when the widgetis opened. Such a technique provides an indication to the user as towhich labels 2701 can be used to activate a widget (either because theyare not currently open or because they are multiple-instance widgets)and which labels 2701 are currently inactive (because they correspond tosingle-instance widgets that have already been opened). In the exampleof FIG. 30, address book 1101, calculator 801, calendar 1801, musicplayer 901, and stock quote widget 1901 are open, single-instancewidgets; therefore their corresponding labels 2701A are grayed-out.Stickies 1301 and clock 2500 are open, multiple-instance widgets;therefore their corresponding labels 2701B are unchanged. Labels 2701Care also unchanged, since they correspond to widgets that are notcurrently open.

In another embodiment, labels 2701 corresponding to openmultiple-instance widgets have a different appearance than labels 2701corresponding to widgets that are not currently open.

In another embodiment, when a widget is opened, its label 2701 isremoved from configuration bar 601. When the widget is closed, its label2701 is restored in configuration bar 601. In another embodiment, when asingle-instance widget is opened, its label 2701 is removed fromconfiguration bar 601, but when a multiple-instance widget is opened,its label 2701 remains on configuration bar 601. When thesingle-instance widget is closed, its label 2701 is restored inconfiguration bar 601. Removing and/or restoring labels 2701 can beaccompanied by animations to reinforce the transition from configurationbar 601 onto dashboard surface and vice versa. For example, when closinga widget, the widget can appear to be sucked into configuration bar 601as the corresponding label 2701 is restored.

If a widget is deleted or removed (by dragging it or its label to trashicon 2801, for example), its label 2701 is removed from configurationbar 601.

In one embodiment, the user can close a widget by clicking on a closeicon, or by dragging the widget back to configuration bar 601. Referringnow to FIG. 29, there is shown a screen shot depicting a dashboardincluding close icon 2901 for closing widget 2500B. In one embodiment,icon 2901 is a rollover icon; it appears when the user has positionedthe cursor over widget 2500B, and it disappears when the cursor is nolonger positioned over widget 2500B. In one embodiment, rollover icon2901 only appears if the cursor is held over widget 2500B for at least apredetermined period of time, such as half a second. In one embodiment,when a widget is closed, an animation is played to reinforce the notionthat the widget is closing. For example, the widget may be momentarilydistorted in such a way that it appears to be sucked into close icon2901, or onto configuration bar 601, before it disappears from thescreen. Other types of animations or effects may also be used, such as afade, or a wipe, or a shrinking effect. In one embodiment, the user canconfigure which effect is desired, or if no effect is desired.

Widget 2500B also includes preferences icon 2902 for accessingpreferences controls for widget 2500B. In one embodiment, icon 2902 is arollover icon; it appears when the user has positioned the cursor overwidget 2500B, and it disappears when the cursor is no longer positionedover widget 2500B (although it continues to be visible when the cursoris moved over to icon 2902). In one embodiment, icon 2902 only appearsif the cursor is held over widget 2500B for at least a predeterminedperiod of time, such as half a second. Clicking on icon 2902 causespreferences controls to be displayed. In one embodiment, preferences areentered using a conventional dialog box (not shown) as is known in theart. In another embodiment, clicking on icon 2902 causes widget 2500B toappear to flip over, revealing its reverse side, which containspreferences controls.

Referring now to FIG. 32, there is shown an example of the dashboardwhere two widgets 2500A and 1301A have been flipped over, revealingpreferences controls 3201. In the example, preferences controls 3201include menus for selecting a location (for clock widget 2500A), andpaper color selector and font selector (for stickies widget 1301A). Oneskilled in the art will recognize that any type of controls, menus,fields, or other elements can be included in preferences controls 3201.The user can dismiss preferences controls 3201 by clicking on Donebutton 3203 or on close box 3202. In one embodiment, close box 3202 is arollover icon, so that it is only visible when the cursor is positionedover widget 1301A (although it continues to be visible when the cursoris moved over to close box 3202). In one embodiment, when preferencescontrols 3201 are dismissed, a flip-over animation is again played, andthe normal appearance of the widget is restored (reflecting any changesthat were made via preferences controls 3201).

Referring now to FIG. 31, there is shown another example of a dashboardwherein some labels 2701A in configuration bar 601 have changed inappearance, while other labels 2701B, 2701C are unchanged, according toone embodiment. Address book 1101, calculator 801, calendar 1801, musicplayer 901, and stock quote widget 1901 are open, single-instancewidgets; therefore their corresponding labels 2701A are grayed-out.Stickies 1301A and 1301B are open, multiple-instance widgets; thereforetheir corresponding label 2701B is unchanged. Labels 2701C, includingworld clock label, are also unchanged, since they correspond to widgetsthat are not currently open. In FIG. 31, the cursor (not shown) ispositioned over stickies widget 1301B, so that close box 2901 andpreferences icon 2902 are displayed, as described above in connectionwith FIG. 29.

In the example of FIG. 31, configuration bar 601 includes Done button3101, which dismisses configuration bar 601 and restores configurationicon 501. Thus, Done button 3101 performs the same action as dismissalicon 603.

In one embodiment, flipping a widget over reveals other information,fields, or controls in addition to (or instead of) preferences fieldsand controls. One skilled in the art will recognize that the reverseside of a widget can include any type of auxiliary information, fields,or controls, and is not limited to a mechanism for accessing preferencescontrols.

Widget Installation

In one embodiment, widgets are preinstalled on the user's computer, sothat dragging them onto the dashboard merely makes them active. Inanother embodiment, widgets are not preinstalled, but are installed inresponse to the user dragging them onto the dashboard. In anotherembodiment, dragging a widget onto the desktop causes code for thewidget to be downloaded from a remote server and installed on the user'smachine. In another embodiment, installing a widget in this manner alsocauses a fully functional application containing related functionalityto be automatically installed as well (although the user can be giventhe option to decline such an installation); for example, installing amusic player widget can cause a fully functional music playerapplication to be installed as well. Authentication and payment may beprerequisites for such operations in some embodiments.

For example, referring briefly to FIG. 28, in one embodiment the userclicks on more gadgets label 2602 to access an online widget store orwebsite where widgets are available for purchase or for free download.The user selects widget(s) for installation on his or her machine, andpays via credit card (if required). The online store or website isdismissed, the selected widget(s) are downloaded and installed, thedashboard is automatically reactivated, and the selected widget appearsin configuration bar 601, ready to be dragged onto the dashboardsurface. Alternatively the new widget can automatically be placed on thedashboard surface. Thus, the present invention provides an easy,seamless way to install widgets.

In one embodiment, an online store or free distribution site is providedfor making widgets 303 available. Available widgets 303 can be viewed,previewed, selected and installed from a website, or from aconfiguration option within the dashboard. In one embodiment, users canpay for widgets 303 using a credit card or any other conventional meansfor online purchases. Widgets 303 are transmitted and installed on theuser's computer according to conventional means. In one embodiment,widgets 303 are installed according to techniques describe in relatedU.S. patent application Ser. No. 10/874,829, for “User Interface forAssisting in the Installation of an Asset,” filed Jun. 22, 2004, thedisclosure of which is incorporated herein by reference.

In one embodiment, widgets such as 801 are implemented using HTMLtechnology with enhancements that are more fully described below and inthe related cross-referenced applications. One skilled in the art willrecognize, however, that any graphics technology can be used forimplementing widgets such as 801.

In one embodiment, widgets 303 are encrypted into a flat file that isexpandable in memory, either in whole or in parts. Widget 303 contentsare indexed so that particular resources can be accessed as needed.Widgets 303 may be encrypted according to any conventional encryptiontechnology.

In one embodiment, clients 302 have complete control of resource loadingof the WebView. When a relative resource is requested, the client 302converts the protocol to one specific to the process. In one embodiment,the NSURL Protocol in Foundation is used to fetch data from theencrypted source.

Software Architecture

Referring now to FIG. 3, there is shown an example of a softwarearchitecture 300 for implementing the present invention according to oneembodiment. In the embodiment, the present invention operates inconnection with an operating system 109 as described above.

In one embodiment, software architecture 300 includes dashboard server301, dashboard client(s) 302, and widget(s) 303. Dashboard configurationinformation 304 is used by server 301 and/or clients 302 to specify theconfiguration options for displaying widgets 303. All of the dashboardconfiguration information, including access levels and the like (ifapplicable), is stored in dashboard configuration information 304. Asdescribed above, such information may include dashboard configurationinformation for two or more dashboards configured by the same user or bydifferent users.

In one embodiment, widgets 303 are displayed using HTML and related webtechnology. Dashboard server 301 manages and launches dashboard client302 processes. Each dashboard client 302 loads a widget 303, which inone embodiment is an HTML webpage and related resources needed todisplay the page. In one embodiment, a client 302 is initiated for eachwidget 303 to be displayed. In one embodiment, clients 302 displaywidgets 303 without a conventional window frame, menu bar, or othercomponents typically associated with on-screen windows; this provides aclean, straightforward display of the overall dashboard that avoidsconfusion and clutter. Clients 302 display widgets 303 by rendering webpages into a “WebView”; the size of each WebView is defined as metadataassociated with the corresponding widget 303. Server 301 is a windowserver that provides data for rendering a layer that can be overlaid onthe normal desktop of the user interface. Widgets 303 are rendered intothe separate layer, and then that layer is drawn on top of the normaldesktop, so as to partially or completely obscure the desktop while thedashboard is active.

Dashboard Server 301

Dashboard server 301 is a lightweight process that can stand alone or beimbedded in another process. Server 301 can be located at computer 102,or at remote server 107. Server 301 provides the followingfunctionality:

Non-widget UI. In one embodiment, server 301 handles user interfacefunctionality that is not directly related to widgets. This includes,for example: activation; deactivation; dashboard background; backgroundanimations; and the like.

Window management. In one embodiment, server 301 acts as a lightweightwindow server for the dashboard client 302 processes. Windows arecreated in server 301 process and then passed to dashboard clients 302.Operations performed on windows go through dashboard server 301. Suchoperations include, for example: resizing; moving; fetching of positionand size; and the like. One advantage to having window operations passthrough server 301 is that server 301 can then react to widget 303changes and update the overall environment. For example, server 301 cancause displayed widgets 303 to bounce off of each other, stick to sidesof the screen, snap to grids, or the like.

Fast login. In one embodiment, dashboard clients 302 are launched andthen rendered into a window from dashboard server 301. Since this cantake some time, dashboard server 301 provides an initial image to berendered in the window while client 302 is launched, so as to improvevisual feedback and to make initial activation animation appearinstantaneous. As dashboard clients 302 load and render, they take overthe window and draw their content.

Event management. In one embodiment, server 301 acts as an event serveras well as a window server. Events come from the operating system windowserver to dashboard server 301 and are routed to the appropriatedashboard client 302. This indirection allows for a variety of features,including: server-side dragging (even if a dashboard client 302 ishung); filtering of events; insertion of server-generated events; andthe like. Dashboard clients 302 communicate with server 301 to describecontrol regions, so that server 301 can initiate server-side dragscorrectly.

Loading widgets 303. In one embodiment, server 301 is responsible forloading widgets 303. It maintains the list of widgets 303 to load whenstarting up. In one embodiment, the dashboard client 302 correspondingto a particular widget 303 is not launched until the first time thedashboard is activated.

Arbitration of widgets 303. In one embodiment, server 301 is thearbitrator of dashboard clients 302. It controls the process and passesinformation to and from each widget 303. If a widget 303 crashes,dashboard server 301 re-launches the process automatically. It alsoprevents crash loops where a widget 303 crashes repeatedly at startup.In one embodiment, all communication to a widget 303 goes throughdashboard server 301 first.

CoreImage integration. In one embodiment, server 301 uses CoreImagetechnology, as described in related U.S. Utility patent applicationscross-referenced above. Filters are applied to the background window ofthe server to provide spotlight and ripple effects.

Widget 303 preference management. In one embodiment, server 301 stores,in configuration information 304 that is stored according to aconventional file system, preferences associated with widgets 303, andvends those preferences to widgets 303.

Dashboard Client 302

In one embodiment, each client 302 is a lightweight process that uses,for example, objects defined as part of a development environment suchas Cocoa Application Framework (also referred to as the Application Kit,or AppKit), described for example at Mac OS X Panther Release NotesCocoa Application Framework, available at“http://developer.apple.com/documentation/ReleaseNotes/Cocoa/AppKit.html”).Clients 302 can be implemented as simplified browser screens that omitconventional interface features such as a menu bar, window frame, andthe like. In one embodiment, clients 302 provide the followingfunctionality in implementing the present invention:

Control of the WebView. Client 302 creates a WebView and attaches theHTML of widget 303 to the WebView. Client 302 acts as the delegate foruser interface requests made by the WebView. In one embodiment, client302 overrides much of AppKit's default behavior as it regards tocommunication to server 301 and event handling. WebViews are genericcontrols for viewing and manipulating HTML and XHTML; they aredescribed, for example, at Web Kit Reference for Objective-C, availableat “http://developer.apple.com/documentation/Cocoa/Reference/WebKit/ObjC_classic/index.h tml”.

JavaScript extensions. In one embodiment, client 302 inserts a customobject in the JavaScript runtime of the WebView. This allows for avariety of extensions for widgets 303, including without limitation:copy/cut/paste; getting/setting preferences; notifications whenpreferences have changed; opening a linked application (for example, awidget 303 may include a button or other trigger that causes acorresponding application to be launched); quitting; moving/resizing;and the like.

Managing Plug-ins. Some widgets 303 use native code as part of theirimplementations. In one embodiment, client 302 includes the capabilityto interface with such native code and/or with databases and data storesavailable locally or remotely. In one embodiment, widgets 303 also havethe ability to create a custom AppKit NSView. A widget developer can usea custom view to enable other types of animations, such as OpenGL views,plug-ins such as Flash, and the like.

In one embodiment, plug-ins are implemented as follows. An Obj-C bundleis loaded from a resources folder associated with widget 303. The bundlehas two methods on its Principal Class:

(id) initWithWebView:(WebView*)webview;

(void) windowScriptObjectAvailable:(WebScriptObject*)windowScriptObject(this allows the plugin to add JavaScript extensions before the web pagehas loaded);

initWithWebView is called when the Dashboard Client starts up, andwebViewLoaded is called when the page finishes loading. The developer ofa plug-in can use the WebKit's scripting APIs to extend the JavaScriptfor a particular widget 303.

Widget 303 Format

In one embodiment, each widget 303 is implemented as an HTML file. TheHTML file can reference other local and remote resources such as stylesheets, other HTML files, JavaScript files, images, and the like.Widgets 303 can be implemented using, for example, a flat bundle fileformat or a packaged HTML file format.

Flat Bundle. The Flat Bundle format has the following directorystructure:

My.widget (directory/Bundle)

Info.plist (file)

My.html (file)

My.png (file)

English. 1proj (optional directory)

Localizable.strings (file)

The Info.plist describes widget 303. It also provides an identifier forwidget 303, and points to the main HTML file and default PNG file. Thedefault PNG file is used as a temporary display while dynamic elementsare loaded from server 301. An example of a structure for Info.plist isas follows:

Key Type Description/Value CFBundleIdentifier CFString. com.apple.widget<widget name> CFBundleName CFString name of the widget MainHTML CFStringname of main HTML resource Width CFNumber default width of the widgetHeight CFNumber default height of the widget DefaultImage CFStringresource name of default PNG Plugin (optional) CFString resource name ofnative plugin

My.html can reference any other local resource as well. In oneembodiment, the resources are specified relative to the HTML file'slocation.

My.png can have any name, based on the “DefaultImage” key in theInfo.plist. This image is rendered by server 301 if there is no cachedrepresentation.

The English. 1proj and other localizable directories are for localizablestrings.

Widget 303 Location

In one embodiment, widgets 303 are stored locally in storage device 106such as a hard drive. Per-machine widgets 303 are stored at, forexample:

/Library/Widgets/

/Applications/Widgets/

Widgets 303 can also be made available on a per-user basis, particularlyin situations where more than one user uses the same computer 102.Per-user widgets 303 are stored, for example, at:

˜/Widgets

˜/Library/Widgets/

One skilled in the art will recognize that these configurations aremerely exemplary, and that any other file format or directory structurecan be used.

Widget 303 Development

In one embodiment, widgets 303 can be developed using WebKit, described,for example, at Web Kit Reference for Objective-C, available at“http://developer.apple.com/documentation/Cocoa/Reference/WebKit/ObjC_classic/index.html”. Additional functionality can also be provided, such as theability to drag to and from web pages, detect control regions, stopplug-ins and timers from firing when the dashboard is hidden, and thelike. In one embodiment, such additional functionality is provided usingan enhanced Canvas architecture, as described in related U.S.Provisional Patent App. No. 60/583,125, for “Procedurally ExpressingGraphic Objects for Web Pages,” filed Jun. 25, 2004, the disclosure ofwhich is incorporated herein by reference. In addition, web extensionsthat are well known in the art can be used for providing additionalfunctionality such as drag-and-drop capability, detection of controlregions, and the like.

For widgets that involve additional, more detailed rendering than isavailable from WebKit/HTML, a <canvas> tag is provided. A CoreGraphicscontext is fetchable from the <canvas> tag, and JavaScript is then usedto draw into the context and effectively the HTML page. Detaileddescription of this implementation can be found in the relatedapplications.

Remote Server 107 Access

In one embodiment, some or all widgets 303 communicate with a remoteserver 107 in order to perform their functions. For example, a weatherwidget requests current weather data from a remote server 107, while apackage tracking widget requests current data regarding packagelocations from a remote server 107. Such communication takes placeaccording to well-known techniques for requesting and receivinginformation across a network such as the Internet: widget 303 or client302 forms a request for data, and transmits the request according toHTTP or some other network protocol; server 107 responds to the requestwith the information; and widget 303 uses the information in forming theoutput that will be displayed to the user. In one embodiment, theseoperations take place in response to JavaScript code within widget 303.Server 107 can be a resource that is available generally to the public,or it can be a proprietary source of information to which the user hasbeen given access. Where appropriate, authorization and/or userverification can be required before server 107 transmits requestedinformation. If desired, the information can be transmitted across asecure channel and/or encrypted prior to transmission, according totechniques that are well known in the art.

Examples of Widgets 303

The following is a list of examples of widgets 303 that can be providedusing the techniques of the present invention. One skilled in the artwill recognize that many other types of widgets 303 can be provided.

buddy list

calculator

date book

dictionary

online music store and music player

movie show times

news feed

package tracker

rolodex

sports scores

stickies

stock quotes

webcam

weather

world clock

currency converter

online auction viewer and tool

lottery

mini inbox for receiving email

puzzle

telephone directory (e.g., yellow pages)

FIGS. 18 through 25 depict examples of some of these types of widgets303.

One skilled in the art will recognize that the particular layout,appearance, and arrangement of each of these widgets 303 are merelyexemplary. In particular, any or all of these widgets 303 can include abutton for accessing a fully functional application having expandedfunctionality, as described above in connection with FIGS. 9 and 10.

FIG. 18 depicts an example of a calendar widget 1801 according to oneembodiment, including current date 1802, calendar display 1803 showingcurrent month, and appointments 1803A. In one embodiment, data for thecalendar is stored locally at computer 102; in another embodiment,widget 1801 retrieves calendar data from a remote server 107.

FIG. 19 depicts an example of a stock quote widget 1901 according to oneembodiment, including several stock quotes 1902, a graph 1903 for aselected stock, and an edit button 1904 for making changes to the stocksto be included in widget 1901. In one embodiment, widget 1901 retrievesstock quote data from a remote server 107.

FIG. 20 depicts an example of a weather widget 2001 according to oneembodiment, including current temperature conditions 2002, current time2003, and forecast 2004. Widget 2001 can be configured to show weatherinformation for any one or more locations of interest to the user. Inone embodiment, widget 2001 retrieves weather data from a remote server107.

FIG. 21 depicts an example of a traffic webcam widget 2100, including acurrent photograph 2102 (or live video feed) of a specified location,and an identifier 2101 of the location according to one embodiment.Widget 2100 can be configured to show images for any one or morelocations of interest to the user. In one embodiment, widget 2100retrieves photographs and/or video from a remote server 107.

FIG. 22 depicts an example of a music player widget 901 according to oneembodiment, including now-playing indicator 909, counter 2202, controls2201 for pausing, playing, rewinding and fast-forwarding, and button 902for accessing a fully functional music player application, as describedabove in connection with FIGS. 9 and 10. In one embodiment, widget 901retrieves music data from a remote server 107.

FIG. 23 depicts an example of a package tracking widget 2300 accordingto one embodiment, including a list of delivery services 2303, one ofwhich is currently selected. Package tracking information 2301 for theselected delivery service is shown, including a name for each item beingdelivered, current status, tracking number, and the date of the lastupdate for that item. Detailed tracking info 2302 is shown for aselected item in 2301. The user can configure widget 2300 to add itemsto be tracked, format the results, and the like. In one embodiment,widget 2300 retrieves package tracking data from a remote server 107.

FIG. 24 depicts an example of an address book widget 1101 according toone embodiment. Widget 1101 includes the following information for anindividual: a name 2402, photograph 2401, and contact information 2403.Arrows 2404 allow the user to navigate to other records in the addressbook. Search field 1201 allows the user to search for names that beginwith or include the search terms. In one embodiment, data for theaddress book is stored locally at computer 102; in another embodiment,widget 1101 retrieves address book data from a remote server 107.

FIG. 25 depicts an example of a clock widget 2500 according to oneembodiment, including a current time display 2501 (which can take anyform, digital and/or analog), and a location 2502 corresponding to thecurrent time display 2501. The user can configure widget 2500 to changethe time, location, and/or format of the display.

In one embodiment, clock widget 2500 changes in appearance according tothe time of day. For example, a light-colored face can be shown duringthe day, and a dark face can be shown at night. Referring again to FIG.26, clock widget 2500A has a light-colored face because the local timein San Francisco is 11:28 am, while clock widget 2500B has a dark facebecause the local time in London is 7:28 pm. In one embodiment, otherdistinguishing visual characteristics are used to denote day and night.In one embodiment, local times from 6:00 am to 6:00 pm are indicated asbeing daytime, while local times from 6:00 pm to 6:00 am are indicatedas being night time. In another embodiment, actual sunrise and sunsettimes are used for controlling the appearance of clock widget 2500(based on the selected location for the clock widget 2500, and furtherbased on sunrise/sunset information retrieved from stored tables or froma resource such as a website). In another embodiment, a continuousgradation is used, so that times near sunset or sunrise are shown insome gradation between the dark and light-colored faces; such times mayalso be shown in a pinkish hue to further reinforce the sunset orsunrise time period.

FIG. 33 depicts an example of a calculator widget 801 according to oneembodiment, including numeric display 3301, keypad 3304, arithmeticoperator keys 3302, memory keys 3305, and equals key 3303. Keys 3302,3303, 3304, and 3305 generally function in a manner similar to that ofconventional calculators and calculator accessories, except as notedherein. Display 3301 shows results of calculations in a manner similarto that of conventional calculators and calculator accessories, exceptas noted herein.

In one embodiment, display 3301 lights up, or otherwise changes inappearance, to indicate that calculator widget 801 is active. Forexample, display 3301 may light up when the user first clicks somewherewithin widget 801, and may stay lit until the user dismisses widget 801or clicks somewhere outside widget 801. While display 3301 is lit,widget 801 is active and can receive user input via the onscreen cursoror via a keyboard or other input device.

In one embodiment, operator keys 3302 light up when lit, and stay lituntil the next key is pressed, so as to remind the user what operationis being performed. For example, in FIG. 33 the division operator key3302 is lit, signifying that the user has clicked on that key, andreminds the user that the current operation is a division operation. Inone embodiment, operator key 3302 stays lit until another operator key3302 is pressed, or until the clear button is pressed, or until equalskey 3303 is pressed; in another embodiment, operator key 3302 stays lituntil any other key is pressed.

Referring now to FIGS. 34A and 34B, there is shown an example of adictionary/thesaurus widget 3400 according to one embodiment. A user cantype a word in text input field 3403, and can select dictionary orthesaurus functionality by clicking on text labels 3401 or 3402,respectively, to see either definition 3406 or synonyms 3408. If eitherdefinition 3406 or synonyms 3408 do not fit within the bounds of widget3400, widget 3400 can auto-resize accordingly, or can display arrows3407 for accessing the rest of the information. Thumb index 3405 canalso be presented, allowing the user to quickly access other words thatappear on the same dictionary page as the entered word. In oneembodiment, a reverse lookup dictionary (not shown) can also be provided(the user enters a definition or part thereof, and widget 303 respondswith one or more words that match the entry). In one embodiment, datafor the dictionary/thesaurus is stored locally at computer 102; inanother embodiment, the dictionary/thesaurus widget retrieves its datafrom a remote server 107.

In one embodiment, the dashboard is also available to a user from aremote location. Configuration information for the user's dashboard isstored at a remote server, pursuant to a user command or automatically.The user can then log in from a remote computer or other device, and bepresented with a web page that duplicates the user's dashboard as itwould be viewed from his or her own computer. Widgets 303 are providedvia HTML pages per the extended functionality described above. The usercan interact with widgets 303 in the same manner as from his or her owncomputer.

In the above description, for purposes of explanation, numerous specificdetails are set forth in order to provide a thorough understanding ofthe invention. It will be apparent, however, to one skilled in the artthat the invention can be practiced without these specific details. Inother instances, structures and devices are shown in block diagram formin order to avoid obscuring the invention.

In particular, one skilled in the art will recognize that otherarchitectures and graphics environments may be used, and that thepresent invention can be implemented using graphics tools and productsother than those described above. In particular, the client/serverapproach is merely one example of an architecture for providing thedashboard functionality of the present invention; one skilled in the artwill recognize that other, non-client/server approaches can also beused.

Reference in the specification to “one embodiment” or “an embodiment”means that a particular feature, structure, or characteristic describedin connection with the embodiment is included in at least one embodimentof the invention. The appearances of the phrase “in one embodiment” invarious places in the specification are not necessarily all referring tothe same embodiment.

Some portions of the detailed description are presented in terms ofalgorithms and symbolic representations of operations on data bitswithin a computer memory. These algorithmic descriptions andrepresentations are the means used by those skilled in the dataprocessing arts to most effectively convey the substance of their workto others skilled in the art. An algorithm is here, and generally,conceived to be a self-consistent sequence of steps leading to a desiredresult. The steps are those requiring physical manipulations of physicalquantities. Usually, though not necessarily, these quantities take theform of electrical or magnetic signals capable of being stored,transferred, combined, compared, and otherwise manipulated. It hasproven convenient at times, principally for reasons of common usage, torefer to these signals as bits, values, elements, symbols, characters,terms, numbers, or the like.

It should be borne in mind, however, that all of these and similar termsare to be associated with the appropriate physical quantities and aremerely convenient labels applied to these quantities. Unlessspecifically stated otherwise as apparent from the discussion, it isappreciated that throughout the description, discussions utilizing termssuch as “processing” or “computing” or “calculating” or “determining” or“displaying” or the like, refer to the action and processes of acomputer system, or similar electronic computing device, thatmanipulates and transforms data represented as physical (electronic)quantities within the computer system's registers and memories intoother data similarly represented as physical quantities within thecomputer system memories or registers or other such information storage,transmission or display devices.

The present invention also relates to an apparatus for performing theoperations herein. This apparatus may be specially constructed for therequired purposes, or it may comprise a general-purpose computerselectively activated or reconfigured by a computer program stored inthe computer. Such a computer program may be stored in a computerreadable storage medium, such as, but is not limited to, any type ofdisk including floppy disks, optical disks, CD-ROMs, andmagnetic-optical disks, read-only memories (ROMs), random accessmemories (RAMs), EPROMs, EEPROMs, magnetic or optical cards, or any typeof media suitable for storing electronic instructions, and each coupledto a computer system bus.

The algorithms and modules presented herein are not inherently relatedto any particular computer or other apparatus. Various general-purposesystems may be used with programs in accordance with the teachingsherein, or it may prove convenient to construct more specializedapparatuses to perform the method steps. The required structure for avariety of these systems will appear from the description below. Inaddition, the present invention is not described with reference to anyparticular programming language. It will be appreciated that a varietyof programming languages may be used to implement the teachings of theinvention as described herein. Furthermore, as will be apparent to oneof ordinary skill in the relevant art, the modules, features,attributes, methodologies, and other aspects of the invention can beimplemented as software, hardware, firmware or any combination of thethree. Of course, wherever a component of the present invention isimplemented as software, the component can be implemented as astandalone program, as part of a larger program, as a plurality ofseparate programs, as a statically or dynamically linked library, as akernel loadable module, as a device driver, and/or in every and anyother way known now or in the future to those of skill in the art ofcomputer programming Additionally, the present invention is in no waylimited to implementation in any specific operating system orenvironment.

It will be understood by those skilled in the relevant art that theabove-described implementations are merely exemplary, and many changescan be made without departing from the true spirit and scope of thepresent invention. Therefore, it is intended by the appended claims tocover all such changes and modifications that come within the truespirit and scope of this invention.

1. (canceled)
 2. A method comprising: at an electronic device includinga display, one or more input devices, one or more processors, andnon-transitory memory: displaying, on the display, a user interface thatincludes a plurality of icons; receiving, via the one or more inputdevices, a sequence of one or more inputs that includes an inputdetected while displaying at least a portion of the user interface thatincludes the plurality of icons; in response to receiving the sequenceof one or more inputs, displaying, on the display, a widget overlaid ona portion of the user interface that includes the plurality of icons,wherein the widget is displayed at a portion of the user interface thatwas previously occupied by one or more of the plurality of icons,wherein the widget corresponds to an application on the device, whereinthe widget includes information from the application, and wherein thewidget includes an element, which, when activated, causes the device tocease to display the widget and display the application.
 3. The methodof claim 1, wherein the application has a state based on a state of thewidget.
 4. The method of claim 1, wherein displaying the user interfacethat includes the plurality of icons includes displaying the pluralityof icons in a multi-row, multi-column array.
 5. The method of claim 1,wherein the plurality of icons includes one or more folder icons.
 6. Themethod of claim 1, wherein displaying the widget includes displaying ananimation introducing the widget.
 7. The method of claim 1, whereindisplaying the widget includes concurrently displaying a plurality ofwidgets and multiple icons of the plurality of icons.
 8. The method ofclaim 1, wherein displaying the widget includes concurrently displayinga plurality of widgets at respective portions of the user interface thatwere previously occupied by respective sets of one or more of theplurality of icons.
 9. The method of claim 1, wherein displaying thewidget includes concurrently displaying the widget and a dock includinga plurality of elements respectively associated with a plurality ofapplications on the device.
 10. The method of claim 1, wherein thewidget includes an element which, when activated, causes the device todisplay a settings user interface for the widget.
 11. An electronicdevice comprising: a display; one or more input devices; non-transitorymemory; and one or more processors to: display, on the display, a userinterface that includes a plurality of icons; receive, via the one ormore input devices, a sequence of one or more inputs that includes aninput detected while displaying at least a portion of the user interfacethat includes the plurality of icons; in response to receiving thesequence of one or more inputs, display on the display, a widgetoverlaid on a portion of the user interface that includes the pluralityof icons, wherein the widget is displayed at a portion of the userinterface that was previously occupied by one or more of the pluralityof icons, wherein the widget corresponds to an application on thedevice, wherein the widget includes information from the application,and wherein the widget includes an element, which, when activated,causes the device to cease to display the widget and display theapplication.
 12. The electronic device of claim 11, wherein theapplication has a state based on a state of the widget.
 13. Theelectronic device of claim 11, wherein the one or more processors are todisplay the user interface that includes the plurality of icons bydisplaying the plurality of icons in a multi-row, multi-column array.14. The electronic device of claim 11, wherein the plurality of iconsincludes one or more folder icons.
 15. The electronic device of claim11, wherein the one or more processors are to display the widget bydisplaying an animation introducing the widget.
 16. The electronicdevice of claim 11, wherein the one or more processors are to displaythe widget by concurrently displaying a plurality of widgets andmultiple icons of the plurality of icons.
 17. The electronic device ofclaim 11, wherein the one or more processors are to display the widgetby concurrently displaying a plurality of widgets at respective portionsof the user interface that were previously occupied by respective setsof one or more of the plurality of icons.
 18. The electronic device ofclaim 11, wherein the one or more processors are to display the widgetby concurrently displaying the widget and a dock including a pluralityof elements respective associated with a plurality of applications onthe device.
 19. The electronic device of claim 11, wherein the widgetincludes an element which, when activated, causes the device to displaya settings user interface for the widget.
 20. A non-transitorycomputer-readable medium having instructions encoded thereon which, whenexecuted by one or more processors of an electronic device including adisplay and one or more input devices, causes the device to: display, onthe display, a user interface that includes a plurality of icons;receive, via the one or more input devices, a sequence of one or moreinputs that includes an input detected while displaying at least aportion of the user interface that includes the plurality of icons; inresponse to receiving the sequence of one or more inputs, display, onthe display, a widget overlaid on a portion of the user interface thatincludes the plurality of icons, wherein the widget is displayed at aportion of the user interface that was previously occupied by one ormore of the plurality of icons, wherein the widget corresponds to anapplication on the device, wherein the widget includes information fromthe application, and wherein the widget includes an element, which, whenactivated, causes the device to cease to display the widget and displaythe application.
 21. The non-transitory computer-readable medium ofclaim 20, wherein the application has a state based on a state of thewidget.